/*
* 网页文档加载完毕之后的动作，也就初始化
* */
// 定义全局的向左偏移量
let left = 0;
// 定义距离下一次偏移需要的时间
let time;
const imgWidth = 980;
let imgCount;


$(document).ready(function (){
    initShowHide();
    moveLeft();
    imgCount = $(".banner>ul.imgList img".length - 1);
    initTabs();
});

function initShowHide(){
    $(".top_bg>.top>ul.right>li.list").mouseover(function (){
        $(".top_bg>.top>ul.right>li.list>div").show();
    }).mouseout(function (){
        $(".top_bg>.top>ul.right>li.list>div").hide();
    });
}

function moveLeft(){
    $(".banner>ul.imgList").css("margin-left",left + "px");
    // 设置一个最小的偏移量，只要一遇到这个值，就让left重新变为0
    if(left <= -2940){
        left = 0;
    }
    time = (left % imgWidth === 0) ? 2000 : 20;

    // 向下取整
    // 张数；0-3
    let index = Math.floor(-left/imgWidth);
    changeIco(index);
    left -= 10;
    setTimeout(moveLeft,time);
}

function changeImg(count){
    let left_temp = -count * imgWidth;
    $(".banner>ul.imgList").css("margin-left",left_temp + "px");
    changeIco(count);
    left = left_temp;
}

function changeIco(count){
    $(".banner>ul.iconList p").css("background-color","rgba(0,0,0,0.5)")
        .eq(count).css("background-color","red");
}

function prevTo(){
    // 计算当前是第几页
    let index = Math.floor(-left / imgWidth);
    let prev = index - 1;
    // 如果 index 是0，即第一张图片，前一张应该是第四张图片
    if(index == 0){
        prev = 3;
    }
    changeImg(prev);
}

function nextTo(){
    // 计算当前是第几页
    let index = Math.floor(-left / imgWidth);
    let next = index + 1;
    // 如果 index 是3，即最后一张图片，后一张应该是第一张图片
    if(index == 3){
        next = 0;
    }
    changeImg(next);
}

function initTabs(){
    // 所有表格隐藏
    $(".tabs>.tabs_content>table.table").hide().eq(0).show();
    // 给七个选项添加点击事件
    // 第一个选项卡，点了之后，需要把第一个a标签的 class 设置车工selected
    let tabs = $(".tabs>.tabs_head>ul>li>a");
    for (let i = 0; i < tabs.length; i++) {
        // 添加事件
        tabs.eq(i).click(function(){
            // 先恢复
            tabs.removeClass("selected");
            // 添加 class
            $(this).addClass("selected");
            // 当前 i 选项下展示出来
            $(".tabs>.tabs_content>table.table").hide().eq(i).show();
        })
    }
}